<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <script src="/static/js/jquery.min.js"></script>
    <link rel="icon" href="/static/img/logo.png">
    <title>
        临时密码
    </title>
</head>
<style>
    body{ text-align:center}
    #divcss1{
        border-radius:30px;
    }
    #divcss2{margin:0 auto;border:1px ;}
    #divcss3{margin:0 auto;border:1px ;}
    #divcss8{
        border-radius:1px;
    }
</style>
<body>

    <div style="background-image:url('/static/img/background.png');background-size:100% 100%; height: 100% ;width: 100%;padding-bottom: 25%;">
        <div>
        </div>
        <div class="div1" id="divcss8"
             style="background :rgba(188,216,255,0.16); height: 10%;width: 100%;font-size: 9pt;">
            <div>
                <br>
            </div>

            <font style="color: white"> 提示：为了保护门锁主人的隐私，请不要随意转发此链接和传播密码</font>

            <div>
                <br>
            </div>
        </div>
        <!-- style="background-color: #BCD8FF;opacity: 0.4;margin-top:10% ;margin-left: 7%;margin-right:  7% ;">-->
        <div class="div1" id="divcss1"
             style="background :rgba(188,216,255,0.4);margin-top:10% ;margin-left: 7%;margin-right:  7% ;">
            <div id="divcss2">

                    <div id="divcss3" style="height: 80px;width: 80px;padding-top:50px; ">
                        <img style=" width: 100%;border-radius:50%;height: auto;border-style:solid; border-color: rgba(255,255,255,1);" id="imgUrl" src="">
                    </div>

                <h2 id="userName" style="color: white"></h2>
                <div style="padding: 0% 15% 0% 15%;text-align: center">
                    <a id = "phone" href="tel:10086">
                        <img src="/static/img/phone.png">
                        <span style="font-weight: bold;text-align: center;color: white;font-size: 14pt" id="account" ></span>
                    </a>

                </div>
                <!--<h3 id="account"style="color: white";background :rgba(255,255,255,0.95)></h3>-->
                <br>
                <div style="padding: 0% 15% 0% 15%;text-align: center">
                    <img src="/static/img/dizhitubiao.png" >
                    <span style="font-weight: bold;text-align: center;color: white;" id="location"></span>
                </div>
                <br>
                <div>
                    <hr align="center" width="70%" style="color: white;opacity: 0.3"/>
                </div>


                <h3 style="color: white;font-size: 18pt;">开门密码</h3>
                <div style="padding: 0% 0% 0% 0%;text-align: center">
                    <span id="lockPassword" style="font-weight: bold;text-align: center; font-size: 30px;color: white"></span>
                </div>

            <h4 id="tip" style="text-align: center;color: white;font-size:9pt"> 提示：开门密码使用后会自动失效</h4>
            <br>
        </div>

    </div>
</div>
</body>
<script type="text/javascript">
    var id = getQueryString("id");
    $.ajax({
        type: "get",
        url: "/api/password/share/id?id="+id,
        dataType: "json",
        success: function (data) {
            if (data.success) {
                var password = data.dataObject.lockPassword;
                var split = password.split('');
                var str = split[0]+ '\xa0\xa0\xa0'+split[1]+'\xa0\xa0\xa0'+split[2]+'\xa0\xa0\xa0'+split[3]+'\xa0\xa0\xa0'+split[4]+'\xa0\xa0\xa0'+split[5];
                $("#userName").text(data.dataObject.userName);
                $("#account").text(data.dataObject.account);
                $("#location").text(data.dataObject.location + data.dataObject.address);
                $("#lockPassword").text(str);
                var o = document.getElementById("imgUrl");
                o.src = data.dataObject.imgUrl;
                var o1 = document.getElementById("phone");
                o1.href = "tel:"+data.dataObject.account;
                //console.log("tel:"+data.dataObject.imgUrl)
            } else {
                alert("密码获取失败");
            }
        }
    });
    /**
     * 获取url后面的参数
     * @param name  参数名
     * @returns
     */
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

</script>

</html>
